<template>
    <div class="progress" :style="`width:${width};`">
        <div class="progress-outer">
            <div class="progress-inner" :style="innerStyles">
                <div class="progress-split" :style="splitStyles"></div>
                <div class="progress-bg" :style="bgStyles"></div>
            </div>
            <div class="progress-end-text" :style="textStyles">
                <span class="type">{{ title }} </span>
                <span class="number" :title="number">{{ number }}</span>
                <span class="unit">辆</span>
            </div>
        </div>
    </div>
</template>
<script>
/**
* 进度条组件
* @author 邓清波
* @date   时间：2022/7/25
*/
export default {
    name: 'Progress',
    props: {
        width: {
            type: String,
            default: '100%'
        },
        // 进度值
        progress: {
            type: [String, Number],
            default: 0
        },
        // 类型
        title: {
            type: [String],
            default: '高速'
        },
        // 数值
        number: {
            type: [String, Number],
            default: 0
        },
        // 颜色
        color: {
            type: [String],
            default: 'B'
        }
    },
    computed: {
        startText () {
            return `${this.progress || 0}%`
        },
        endText () {
            return `${100 - this.progress || 0}%`
        },
        innerStyles () {
            return {
                background: `${(this.color == 'B' ? '#d4eafc' : '#d8ebee')}`
            }
        },
        splitStyles () {
            return {
                left: `${(this.progress > 1 ? Number(this.progress) + 0.5 : this.progress)}%`, // -0.5是因为进度条是椭圆的 切割线需要往回一部分距离,以遮盖住椭圆部分
                display: this.progress == 0 || this.progress == 100 ? 'none' : 'block'
            }
        },
        bgStyles () {
            return {
                width: `${(this.progress)}%`,
                background: `${(this.color == 'B' ? 'linear-gradient(#33c3ff 0%, #84dbff 100%)' : 'linear-gradient(#6AEA85 0%, #5FCE76 100%)')}`
            }
        },
        textStyles () {
            return {
                color: `${(this.color == 'B' ? '#2392C0' : '#2DAD48')}`
            }
        }
    },
    watch: {

    }
}
</script>
<style lang="less" scoped>
.progress {
    color: rgba(0, 0, 0, .65);
    width: 100%;
    height: 100%;

    .progress-outer {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .progress-inner {
            flex: 1;
            height: 100%;
            background-color: #d4eafc;
            // border-radius: 20px;
            position: relative;
            display: flex;
            align-items: center;

            .progress-bg {
                background-color: #d4eafc;
                height: 50%;
                // border-radius: 3px;
                transition: all .3s cubic-bezier(.08, .82, .17, 1) 0s;

            }

            .progress-split {
                position: absolute;
                width: 1px;
                height: 87%;
                top: 50%;
                transform: translate(0, -50%);
                background: #0074A4;
            }
        }

        .progress-end-text {
            width: 120px;
            margin: 0 0px 0 15px;
            text-align: center;
            color: red;
            display: flex;
            align-items: center;
            word-break: keep-all;

            .type {
                font-size: 14px;
                font-weight: 500;
                color: #333333;
            }

            .number {
                font-size: 24px;
                font-weight: 700;
                margin: 0 5px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

            }

            .unit {
                font-weight: 500;

                font-size: 14px;
            }
        }
    }

}
</style>
